<template>
  <div class="auth-page">
    <h2>{{ isLogin ? '登录' : '注册' }}</h2>
    <form @submit.prevent="handleSubmit">
      <div v-if="isLogin">
        <label for="login-email">邮箱:</label>
        <input type="email" id="login-email" v-model="email" required />
      </div>
      <div v-else>
        <label for="register-email">邮箱:</label>
        <input type="email" id="register-email" v-model="email" required />
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <div v-if="!isLogin">
        <label for="confirm-password">确认密码:</label>
        <input type="password" id="confirm-password" v-model="confirmPassword" required />
      </div>
      <button type="submit">{{ isLogin ? '登录' : '注册' }}</button>
    </form>
    <p @click="toggleAuthMode">{{ isLogin ? '还没有账号？去注册' : '已有账号？去登录' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: true,
      email: '',
      password: '',
      confirmPassword: ''
    };
  },
  methods: {
    toggleAuthMode() {
      this.isLogin = !this.isLogin;
    },
    handleSubmit() {
      if (!this.isLogin && this.password !== this.confirmPassword) {
        alert('密码不一致');
        return;
      }
      const authData = {
        email: this.email,
        password: this.password
      };
      // 这里调用后端接口进行登录或注册
      // 示例：this.$axios.post(this.isLogin ? '/api/login' : '/api/register', authData)
      //   .then(response => {
      //     console.log(response);
      //   })
      //   .catch(error => {
      //     console.error(error);
      //   });
    }
  }
};
</script>

<style scoped>
.auth-page {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.auth-page h2 {
  text-align: center;
}

.auth-page form {
  display: flex;
  flex-direction: column;
}

.auth-page label {
  margin-top: 10px;
}

.auth-page input {
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.auth-page button {
  margin-top: 20px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.auth-page button:hover {
  background-color: #0056b3;
}

.auth-page p {
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
  color: #007bff;
}

.auth-page p:hover {
  text-decoration: underline;
}
</style>